<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>严选</title>
<style>

*{
	margin: 0;
	padding: 0;
	list-style: none;
}
#root{
	width: 1200px;
	min-height: 900px;
	/*background-color: pink;*/
	/* margin: 0px auto; */
	position: relative;
}
#head{
	width: 100%;
    height: 100px;
    padding: 15px;
	/*background-color: red;*/
}

.logo a{
	text-decoration: none;
	color: black;
	font-size: 2em;
	font-family: 华文楷体;
	color: black;
}
.headnav{
	width: 946px;
	height: 40px;
	/* background: #333;*/
	font-family: 华文楷体
}
ul{
	font-size: 25px;
}
.hcent{
	width: 940px;
	margin: 0 auto;
	height: 60px;
}
.hnav{
	float: left;
	width: 600px;
	height: 30px;
	/* margin:22px 0 0 0;*/
}
.lone{
	float: left;
	height: 17px;
	line-height: 17px;
	text-align: center;
	padding: 0 7px 0 7px;
	position: relative;
	/* z-index: 999;*/
	width: 80px;
}
a{
	text-decoration: none;
	color: black;
}
.ysktr{
	width: 224px;
	height: 338px;
	background: #ffffff;
	margin: 0 14px 16px 0;
	float: left;
	position: relative;
	border: 1px solid #f0f0f0;
	padding: 40px;
}
.yshimg img{
	position: relative;
	overflow: hidden;
	height: 224px;
	width: 224px;
}
.shnr{
	padding: 0 12px 0 15px;
	position: relative;
}
.ysktr .yshnr .jg{
	/* position: absolute;*/
	top: 46px;
	left: 15px;
}
.jg span{
	font-size: 14px;
	color: red;
	position: absolute;
	bottom: 10px;
	font-size: 20px;
}
.jg del{
	font-size: 12px;
	color: #999;
	padding-left: 18px;
	position: absolute;
	bottom: 10px;
	font-size: 20px;
	left: 100px;
}
.ysktr .yshou{
	position: absolute;
	bottom: 0px;
	left: 15px;
	color: #999;
	font-size: 12px;
	float: left;
	width: 150px;
}
.ysktr .baoy{
	bottom: 8px;
	right: 15px;
	color: #999;
	font-size: 12px;
	bottom: 2px;
	position: absolute;
}
#nav{
	height: 40px;
	background: #333;
	color: #999;
	top: 0;
	position: fixed;
	z-index: 10000;
	width: 100%;
	left: 0;
	min-width: 990px;
}
#nav li{
	float: left;
	height: 40px;
	list-style: none;
	width: 60px;
	text-align: center;
	line-height: 40px;
	text-align: center;
}

#nav li>a{
	color: #ffffffb8;
	line-height: 30px;
	text-decoration: none;
	font-size: 20px;
}
#nav li>a:hover{
	color: red;
}
/* .yshcp{
	position: relative;
	bottom: 710px;
} */
/* #middle{
	height: 100%;
	width: 100%;
	background-color: red;
} */
#head2{
	height: 50px;
	width: 80%;
	position: absolute;
	top: 50px;
}
.mid{
	min-height: 800px;
	width: 100%;
	position: absolute;
	top: 110px;
}
.lv{
	width: 200px;
	height: 160px;
	float: left;
	padding: 50px;
	text-align: center;

}
.sp{
	font-family: 华文楷体;
	font-size: 20px;
}
#head2>h2{
	top:30px;
	font-family: 华文楷体;
    font-size: 30px;
    display: inline;
}
#head2>span{
	font-family: 华文隶书;
    font-size: 20px;
}
#content{
    width:300px;
    margin:0 auto;
    padding:10px;
    background:#eee;
    border:1px solid #999;
    /* background-image: url('/images/2.jpg'); */
    position: fixed;
    right:0;
    z-index: 9999;
}
#content h3 span{
    color:red;
    font:bold 20px Arial;
}
#content h3 a{
    font:12px/23px '宋体';
    color:#888;
}
#sousuo{
	float: right;
	height: 30px;
}
#sousuobt{
	height:34px;
	float:right;
}
</style>

</head>
<body>
<div id="root">
	<div id="head">
		
		<ul id="nav">
			<li><a href="#">首页</a></li>
			<li><a href="#">菜谱</a></li>
			<li><a href="#">食材</a></li>
			<li><a href="#">健康</a></li>
			<li><a href="#">专题</a></li>
			<li><a href="#">社区</a></li>
			<li><a href="#">更多</a></li>
		</ul>

	<div id="head2">
		<h2>美食天下</h2>
         <span>我所有的朋友都是吃货</span>
         <form action="/one/sousuo" method="post">
         	<input type="text" id="sousuo" placeholder="请输入要搜索的内容">
         	<input type="submit" id="sousuobt" value="搜索" style="height:34px;">
         </form>
         
         <div id="content">
                 <a href="http://localhost:3000/one/liangcai"><h1>限时抢购啦！</h1></a>
                 <!-- 特价数据库 -->
                 <h3>倒计时：<span id="times"></span></h3>
             </div>
		<div class="headnav">
			<div class="hcent">
				<div class="hnav">
					<ul>
						
						<li class="lone"><a href="#">
							<span>首页</span>
						</a></li>
						<li class="lone"><a href="#">
							<span>菜谱</span>
						</a></li>
						<li class="lone"><a href="#">
							<span>食材</span>
						</a></li>
						<li class="lone"><a href="#">
							<span>健康</span>
						</a></li>
						<li class="lone"><a href="#">
							<span>专题</span>
						</a></li>
						<li class="lone"><a href="#">
							<span>社区</span>
						</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="mid">
	<%data.forEach(function(item){%>
	<li class="lv">
		 <a href="/shangcheng/xiangqing?id=<%=item.sp_id%>"><img width="200" src="/images/<%=item.sp_img%>" alt=""></a>
		<span class="sp"><%=item.sp_name%></span>
		<span class="sp"><%="￥"+item.sp_price%></span>
	</li>
	<%})%>
</div>
</div>
<script>
    function fresh()
    {
        var endtime=new Date("2018/06/01 12:00:00");//Fri Jun 01 2018 12:00:00 GMT+0800 (中国标准时间）
        var nowtime = new Date();
        var leftsecond=parseInt((endtime.getTime()-nowtime.getTime())/1000);
        //getTime()拿到时间戳，单位是秒
        d=parseInt(leftsecond/3600/24);//天数
        h=parseInt((leftsecond/3600)%24);//小时
        m=parseInt((leftsecond/60)%60);
        s=parseInt(leftsecond%60);
     // document.getElementById("times").innerHTML=__h+"小时"+__m+"分"+__s+"秒";
        document.getElementById("times").innerHTML=d+"天"+h+"小时"+m+"分"+s+"秒";
        if(leftsecond<=0){
            document.getElementById("times").innerHTML="活动已结束！";
            clearInterval(sh);
        }
}
var sh;
sh=setInterval(fresh,1000);

//拿到搜索框输入的内容
var ssk=document.getElementById("sousuo");
var ssk_value=ssk.value;

</script>
</body>
</html>
 